<template>
    <div class="searchList">
    <mt-search v-model="userKey"
    cancel-text="取消"
    placeholder="搜索">
    </mt-search>
    <mt-button
     size="normal"
     type="primary">搜索</mt-button>
     <div class="lt_order">
        <a href="javascript:;">
            <span>上架时间</span>
            <span class="fa fa-angle-down"></span>
        </a>
        <a href="javascript:;">
            <span>价格</span>
            <span class="fa fa-angle-down"></span>
        </a>
        <a href="javascript:;">
            <span>销量</span>
            <span class="fa fa-angle-down"></span>
        </a>
        <a href="javascript:;">
            <span>折扣</span>
            <span class="fa fa-angle-down"></span>
        </a>
     </div>
    //  产品模块
            <div class="productList">
        <router-link to class="probox">
            <img src="../assets/images/product.jpg" alt>
            <div class="lt_prodesc">所以我们需要重置样式：样式名称不要猜，而是检查元素去查找对应的样式名称</div>
            <div class="lt_proprice">
            <span>￥200.00</span>
            <span>￥300.00</span>
            </div>
            <mt-button type="primary">立即购买</mt-button>
        </router-link>
        <router-link to class="probox">
            <img src="../assets/images/product.jpg" alt>
            <div class="lt_prodesc">所以我们需要重置样式：样式名称不要猜，而是检查元素去查找对应的样式名称</div>
            <div class="lt_proprice">
            <span>￥200.00</span>
            <span>￥300.00</span>
            </div>
            <mt-button type="primary">立即购买</mt-button>
        </router-link>
        <router-link to class="probox">
            <img src="../assets/images/product.jpg" alt>
            <div class="lt_prodesc">所以我们需要重置样式：样式名称不要猜，而是检查元素去查找对应的样式名称</div>
            <div class="lt_proprice">
            <span>￥200.00</span>
            <span>￥300.00</span>
            </div>
            <mt-button type="primary">立即购买</mt-button>
        </router-link>
        <router-link to class="probox">
            <img src="../assets/images/product.jpg" alt>
            <div class="lt_prodesc">所以我们需要重置样式：样式名称不要猜，而是检查元素去查找对应的样式名称</div>
            <div class="lt_proprice">
            <span>￥200.00</span>
            <span>￥300.00</span>
            </div>
            <mt-button type="primary">立即购买</mt-button>
        </router-link>
        <router-link to class="probox">
            <img src="../assets/images/product.jpg" alt>
            <div class="lt_prodesc">所以我们需要重置样式：样式名称不要猜，而是检查元素去查找对应的样式名称</div>
            <div class="lt_proprice">
            <span>￥200.00</span>
            <span>￥300.00</span>
            </div>
            <mt-button type="primary">立即购买</mt-button>
        </router-link>
        <router-link to class="probox">
            <img src="../assets/images/product.jpg" alt>
            <div class="lt_prodesc">所以我们需要重置样式：样式名称不要猜，而是检查元素去查找对应的样式名称</div>
            <div class="lt_proprice">
            <span>￥200.00</span>
            <span>￥300.00</span>
            </div>
            <mt-button type="primary">立即购买</mt-button>
        </router-link>
        </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      userKey: ''
    }
  }
}
</script>
<style lang="scss" scoped>
.searchList {
  position: relative;
  .mint-search {
    height: auto;
  }
  .mint-button {
    position: absolute;
    height: 28px;
    top: 8px;
    right: 10px;
    z-index: 998;
    font-size: 14px;
    border-radius: 0 4px 4px 0;
  }
}
.productList {
  padding: 10px;
  .probox {
    margin-top: 10px;
    padding-bottom: 10px;
    width: 49%;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 2px 0px #ddd;
    float: left;
    text-decoration: none;
    img {
      width: 100%;
      display: block;
    }
    .lt_prodesc {
      color: #666;
      font-size: 13px;
      padding: 0px 5px;
      display: -webkit-box;
      overflow: hidden;
      white-space: normal !important;
      text-overflow: ellipsis;
      word-wrap: break-word;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .lt_proprice {
      margin: 5px 0;
      > span {
        color: #000;
        font-size: 13px;
      }
      > span:nth-of-type(1) {
        color: red;
        font-size: 13px;
        margin-right: 10px;
      }
    }
    .mint-button {
      display: block;
      margin: 0 auto;
      font-size: 15px;
      height: auto;
      padding: 5px 15px;
    }
  }
  .probox:nth-of-type(even) {
    margin-left: 2%;
  }
}wang
</style>
